<template>
	<!-- 陈列任务 -->
	<view v-if="pageShow">
		<u-tabs lineColor="#F5AC4F" :list="list1" @click="click"
			itemStyle="padding:0;width:50%;backgroundColor:white;height:100rpx"></u-tabs>

		<view class="fontSize" v-if="current == 0">
			<view class="flexcenter" style="margin-top: 300rpx;" v-if="!list.list.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="box">
				<view class="flexcenter titletext " style="padding: 20rpx 0;" v-if="list.list.length">已领取：<text
						style="color: #1ED76D;">{{list.ylq_num}}</text>,未领取：<text
						style="color: #F5AC4F;">{{list.wlq_num}}</text></view>
				<view class="" v-for="(item,index) in list.list" :key="item.id" @click="getTask(item.id)">
					<view class="flexbetween">
						<view class="tsak">
							<view></view>
							<view class="xiankuan">{{item.title}}</view>
						</view>
						<view class="strongtext orangetext" v-show="item.lq_status==1">未领取</view>
						<view class="strongtext grangetext" v-show="item.lq_status==2">已领取</view>
					</view>
					<view class="detail">
						<view class="detailLeft">
							<view class="" v-show="item.lq_status==1">
								截至时间：{{DifferenceTimer(item.end_time*1000,Number(new Date()))}}</view>
							<view class="" v-show="item.lq_status==2">截至时间：{{item.end_time_text}}</view>
							<view class="">完成奖励<text style="color: #F5AC4F;">{{item.coupon.name}}</text>优惠券一张</view>
						</view>
						<view class="detailDetail">
							<uni-icons type="right" color="#999999" size="30"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fontSize" v-if="current == 1">
			<view class="mainpadding">
				<u-subsection :list="subsection" mode="button" :current="wc_status"
					@change="changeList()"></u-subsection>
				<view class="flexcenter titletext margin_top">已完成：<text
						style="color: #1ED76D;">{{mylist.ywc_num}}</text>,未完成：<text
						style="color: #ff0000;">{{mylist.wwc_num}}</text></view>
			</view>
			<view class="flexcenter" style="margin-top: 300rpx;" v-if="!mylist.list.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="box">
				<view class="" v-for="(item,index) in mylist.list" :key="index" @click="getTask(item.clrw_id)">
					<view class="flexbetween">
						<view class="tsak">
							<view></view>
							<view class="xiankuan">{{item.clrw.title}}</view>
						</view>
						<!-- 0=待完成,10=待审核,20=审核通过,30=审核不通过,40=已结束 -->
						<view class="strongtext orangetext" v-show="item.status==0">待完成</view>
						<view class="strongtext orangetext" v-show="item.status==10">待审核</view>
						<view class="strongtext grangetext" v-show="item.status==20">审核通过</view>
						<view class="strongtext redtext" v-show="item.status==30">审核未通过</view>
						<view class="strongtext redtext" v-show="item.status==40">已结束</view>
					</view>
					<view class="detail">
						<view class="detailLeft">
							<view class="">截至时间：{{item.clrw.end_time_text}}</view>
							<view class="">完成奖励<text style="color: #F5AC4F;">{{item.clrw1.coupon.name}}</text>优惠券一张
							</view>
							<view class="">优惠券类型：<text style="color: #F5AC4F;">{{item.clrw1.coupon.goods_type==1?"全部商品":"部分商品"}}</text>
							</view>
							
						</view>
						<view class="detailDetail">
							<uni-icons type="right" color="#999999" size="30"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	import conmon from '@/commonFun/conmon.js';
	import {
		ref
	} from 'vue';
	export default {
		data() {
			return {
				subsection: ['已完成', '未完成'],
				wc_status: 0,
				list1: [{
					name: '陈列任务',
				}, {
					name: '我的陈列',
				}, ],
				current: '0',
				pageShow: false,
				list: {},
				mylist: {},
			};
		},
		onShow() {
			this.chenlie();
		},
		methods: {
			DifferenceTimer(now, before) {
				let num_day = (now - before) / (1000 * 60 * 60 * 24);
				return num_day.toFixed(0)
			},
			changeList(e) {
				this.mylist = {}
				this.wc_status = e
				this.mychenlie()
			},
			click(item) {
				this.current = item.index;
				if (this.current == 0) {
					this.chenlie()
				} else {
					this.mychenlie()
				}
			},
			chenlie() {
				let _this = this;
				httpRequest.request('/customapi/user/clrwList', 'POST', {

				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
						this.pageShow = true
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			mychenlie() {
				let _this = this;
				httpRequest.request('/customapi/user/myClrw', 'POST', {
					status: this.wc_status == 1 ? 20 : 10
				}).then(res => {
					if (res.code == 1) {
						_this.mylist = res.data
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			getTask(i) {
				uni.navigateTo({
					url: 'getTask?id=' + i
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.fontSize {
		font-size: 32rpx;
	}

	.strongtext {
		font-size: 28rpx;
		font-weight: bold;
	}

	.orangetext {
		color: #f5ac4f;
		margin-right: 30rpx;
	}

	.grangetext {
		color: #28C445;
		margin-right: 30rpx;
	}

	.redtext {
		color: #ff0000;
		margin-right: 30rpx;
	}

	.box {
		padding: 20rpx;

		view {
			background-color: #ffffff;
			border-radius: 8px;
			margin-bottom: 20rpx;

			// padding: 20rpx 20rpx 40rpx 20rpx;
			.tsak {
				background-color: #ffffff;
				// padding: 20rpx;
				padding: 20rpx 20rpx 0 20rpx;
				border-radius: 8px;
				display: flex;
				align-items: center;

				view:first-child {
					width: 16rpx;
					height: 40rpx;
					background-color: #f5ac4f;
					margin-right: 20rpx;
					border-radius: 8px;
				}
			}

			.detail {
				// padding: 0  0 20rpx 80rpx;
				padding-left: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.detailLeft {
					color: #999999;
					overflow: hidden;

					view {
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>